<template>
	<el-drawer v-model="visible" title="客户列表" :size="800" append-to-body destroy-on-close @closed="$emit('closed')">
		<el-container>
			<div class="right-panel">
				<div>
					<el-radio-group v-model="search.state" size="medium" style="margin-left: 10px;">
						<el-radio-button label="1">已分配</el-radio-button>
						<el-radio-button label="0">未分配</el-radio-button>
					</el-radio-group>
				</div>

				<div style="display: flex;margin-top: 20px;">
					<div style="display: flex;align-items: center;">
						<span class="demonstration" style="margin-left: 20px">客户编码:</span>
						<el-input v-model="search.customerNumber" placeholder="请输入"
							style="margin-left: 5px; width: 180px" clearable></el-input>
					</div>
					<div style="display: flex;align-items: center;">
						<span class="demonstration" style="margin-left: 20px">客户名称:</span>
						<el-input v-model="search.customerName" placeholder="请输入" style="margin-left: 5px; width: 180px"
							clearable></el-input>
					</div>
				</div>
				<div style="display: flex;margin-top: 20px;">

					<div style="display: flex;align-items: center;">
						<span class="demonstration" style="margin-left: 20px">渠道级别:</span>
						<el-select v-model="search.channelLevel" placeholder="请选择"
							style="width: 180px; margin-left: 5px" clearable>
							<el-option label="VIP" value="VIP"></el-option>
							<el-option label="二级" value="二级"></el-option>
							<el-option label="三级" value="三级"></el-option>
							<el-option label="终端" value="终端"></el-option>
						</el-select>
					</div>
					<div style="display: flex;align-items: center;">
						<span class="demonstration" style="margin-left: 20px">片区:</span>
						<el-select v-model="search.areaName" placeholder="片区" style="width: 180px;margin-left: 5px"
							filterable clearable>
							<el-option v-for="item in areaList" :key="item.id" :label="item.label"
								:value="item.label"></el-option>
						</el-select>
					</div>

				</div>
				<div style="width: 100%;display: flex;justify-content: right;margin-top: 20px;">
					<el-button type="primary" style="margin-left: 50px" @click="upsearch">查询</el-button>
					<el-button type="" @click="upsearchClearable" style="margin-right: 10px;">清空</el-button>
				</div>
				<div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">
				</div>
			</div>
			<el-header style="display: none"></el-header>
			<el-main class="nopadding">
				<scTable ref="table" :apiObj="apiObj" :params="params" stripe remoteSort remoteFilter
					@selection-change="handleSelectionChange">
					<el-table-column type="selection"></el-table-column>
					<el-table-column label="客户编码" prop="customNum" align="center"></el-table-column>
					<el-table-column label="客户名称" prop="customName" align="center"></el-table-column>
					<!-- <el-table-column label="父客户编码" prop="parentCustomerCode" align="center" width="150"></el-table-column> -->
					<!-- <el-table-column label="父客户名称" prop="parentCustomerName" align="center" width="150"></el-table-column> -->
					<!-- <el-table-column label="父客户关系" prop="parentCustomerRelation" align="center" width="150"></el-table-column> -->
					<el-table-column label="渠道级别" prop="customChannel" align="center"></el-table-column>
					<!-- <el-table-column label="商业形态大类" prop="businessTypeCategory" align="center" width="150"></el-table-column> -->
					<!-- <el-table-column label="商业形态小类" prop="businessTypeSubcategory" align="center" width="150"></el-table-column> -->
					<!-- <el-table-column label="客户性质" prop="customerType" align="center" width="150"></el-table-column> -->
					<el-table-column label="分配状态" prop="status" align="center">
						<template #default>
							<div v-if="state == 1" style="color: #ff0000">已分配</div>
							<div v-else>未分配</div>
						</template>
					</el-table-column>
					<!-- <el-table-column label="操作" fixed="right" align="center" width="180">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small" @click="table_show(scope.row)">查看详情 </el-button>
						</el-button-group>
					</template>
				</el-table-column> -->
				</scTable>
			</el-main>
			<el-footer>
				<el-button @click="visible = false">关 闭</el-button>
				<!-- <el-button type="primary" @click="dialogClick">确 定</el-button> -->
				<el-button type="primary" v-if="!flag" @click="dialogClick">分配</el-button>
				<el-button type="primary" v-if="flag" @click="dialogClick">解除分配</el-button>
			</el-footer>
		</el-container>
	</el-drawer>
</template>

<script>
export default {
	name: 'adActivity',
	data() {
		return {
			areaList: [], //片区列表
			dialog: {
				info: false
			},
			visible: false,
			search: {
				state: 1
			},
			state: 1,
			// apiObj: this.$API.emp.getCustomList,
			apiObj: this.$API.customerCenter.getCustomerList,

			params: {},
			multipleSelection: [],
			flag: true

		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val)
		}
	},

	mounted() {
		this.getArea()
	},
	async created() {
	},
	methods: {
		//获取片区列表
		async getArea() {
			let res = await this.$API.plan.areas.get()
			// console.log('片区列表', res.data);
			res.data[0].children.forEach((item) => {
				if (item.children.length > 0) {
					this.areaList.push(...item.children)
				} else {
					this.areaList.push(item)
				}
			})
		},
		handleSelectionChange(val) {
			console.log(val)
			this.multipleSelection = val
		},
		// handleSelect(selection, row){
		//     console.log(selection, row)
		// },
		// handleSelectAll(selection, checkedRows){
		//       console.log(selection, checkedRows)
		// },
		//任务
		selectable() {
			//  console.log(row,index)
			//  if(this.state==1){
			// 	 return false
			//  }else{
			// 	 return true
			//  }
		},
		downTemp() {
			// 下载模板
		},
		upsearchClearable() {
			this.search = {
				state: 0,
				ctoNum: '',
				ctoName: '',
				ctoLeave: ''
			}
			this.upsearch()
		},
		//编辑
		table_edit(row) {
			this.dialog.edit = true
			this.$nextTick(() => {
				this.$refs.editDialog.open('edit').setData(row)
			})
		},
		async dialogClick() {
			if (this.multipleSelection.length > 0) {
				let data = {
					empCustomCreateDTOS: this.multipleSelection,
					// empNum: this.params.empNo,
					empNumber: this.params.empNumber,
					state: this.state
					// department :this.params.department,
					// area :this.params.area,
					// provinces :this.params.provinces,
				}

				var res = await this.$API.emp.insertCustom.post({ data: data })
				if (res && res.code == 0) {
					this.$nextTick(() => {
						this.$refs.table.refresh()
						this.$message.success('操作成功')
					})
				}
			} else {
				this.$message.warning('请选择未分配客户')
			}
		},
		//表格内开关
		async changeSwitch(val, row) {
			row.enable = row.enable === 1 ? 0 : 1
			row.$switch_status = true
			let data = {
				enable: val,
				staffNumber: row.staffNumber
			}
			var res = await this.$API.user.user.enable.post({ data: data })
			if (res && res.code === 0) {
				setTimeout(() => {
					delete row.$switch_status
					row.enable = val
					// console.log(typeof val, row)
					this.$message.success('操作成功')
				}, 500)
			}
		},

		//查看
		table_show(row) {
			this.dialog.info = true
			this.$nextTick(() => {
				this.$refs.infoDialog.setData(row)
			})
		},
		open() {
			this.mode = '客户列表'
			this.visible = true
			return this
		},
		upsearch() {
			console.log(this.search)
			setTimeout(() => {
				this.state = this.search.state
			})
			this.search = { ...this.params, ...this.search }
			console.log(this.search)
			this.$refs.table.upData(this.search)


			if (this.search.state == 0) {
				this.flag = false
			} else if (this.search.state == 1) {
				this.flag = true
			}
		},
		cleanSearch() {
			this.search = {}
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode === 'add') {
				data.id = new Date().getTime()
				this.$refs.table.tableData.unshift(data)
			} else if (mode === 'edit') {
				this.$refs.table.tableData
					.filter((item) => item.id === data.id)
					.forEach((item) => {
						Object.assign(item, data)
					})
			}
		},
		async setData(data) {
			console.log('分配客户的参数', data);

			console.log(data)
			let from = {
				// empNo: data.empNum
				empNumber: data.empNum,

				// empProvinces:data.empProvinces,
				// empArea:data.empArea,
				// empDepartment:data.empDepartment,
			}
			this.params = { ...from, ...this.search }
		}
	}
}
</script>

<style>
.header-btn-item {
	display: flex;
}
</style>
